import Vue from 'vue'
import { Button, Dialog } from 'element-ui'
import { isFunction } from '@utils/is'

const Modal = ({
    data() {
        return {
            options: this.props.options,
            visible: true,
        }
    },
    props: {
        options: {
            type: Object,
            default: () => ({})
        }
    },
    methods: {
        service: (options) => {
            this.options = options
            this.show()
        },
        show() {
            this.visible = true;
        },
        hide() {
            this.visible = false
        },
        onConfirm: async () => {
            await this.options.onConfirm?.()
            this.hide()
        },
        onCancel: () => {
            this.options.onCancel?.()
            this.hide()
        }
    },
    render(h) {
        return (
            <Dialog
                modelValue={this.visible}
                title={this.options?.title}
                destroyOnClose={true}
                {...this.options.props}
                onClose={this.onCancel}
            >
               
            </Dialog>
        )
    },
})

export const useModal = (() => {
    let instance = null;
    return (options) => {
        if (instance) {
            instance.service(options)
            return instance
        }
        const div = document.createElement('div')
        document.body.appendChild(div)
        const VueModal = Vue.extend(Modal, { options })
        instance = (new VueModal()).$mount(div)
        return instance
    }
})()
